<!--
 * @Author: chenxunan
 * @Date: 2019-11-21
 * @LastEditors: 
 * @LastEditTime:
 * @Description: 
 -->

<template>
  <transition name="grimm-dialog-fade">
    <grimm-popup
      type="dialog"
      :z-index="zIndex"
      v-show="isVisible"
      :mask="overlay"
      @mask-click="maskClick"
    >
      <div class="grimm-dialog-content" :style="{'width': `${width}px`}">
        <div v-if="title" class="grimm-dialog-header">{{title}}</div>
        <div class="grimm-dialog-main">
          <slot></slot>
        </div>
        <div v-if="message" class="grimm-dialog-message" :style="{'text-align': messageAlign}">
          <pre style="white-space: normal;">{{message}}</pre>
        </div>
        <div class="grimm-dialog-footer">
          <grimm-button 
            type="secondary" 
            v-if="showCancelButton"
            @click="handleCancel"
          >
            {{cancelButtonText}}
          </grimm-button>
          <grimm-button 
            type="primary" 
            v-if="showConfirmButton"
            @click="handleConfirm"
          >
            {{confirmButtonText}}
          </grimm-button>
        </div>
      </div>
    </grimm-popup>
  </transition>
</template>

<script>
import GrimmPopup from '../Popup';
import GrimmButton from '../Button'
import visibilityMinxin from '../../common/mixins/visibility';
import popupMinxin from '../../common/mixins/popup';
const COMPONENT_NAME = 'grimm-dialog';
export default {
  name: COMPONENT_NAME,
  mixins: [visibilityMinxin, popupMinxin],
  components: { GrimmPopup, GrimmButton },
  props: {
    title: {
      type: String,
      defalut: '',
    },
    width: {
      type: String,
      default: '240'
    },
    message: {
      type: String,
      default: '',
    },
    messageAlign: {
      type: String,
      default: 'center',
    },
    showConfirmButton: {
      type: Boolean,
      default: true,
    },
    showCancelButton: {
      type: Boolean,
      default: false,
    },
    confirmButtonText: {
      type: String,
      default: '确认',
    },
    cancelButtonText: {
      type: String,
      default: '取消',
    },
    overlay: {
      type: Boolean,
      default: true,
    },
    closeClickOverlay: {
      type: Boolean,
      default: false,
    },
    beforeClose: {
      type: Function,
      default: _ => _,
    }
  },
  methods: {
    maskClick(e) {
      this.closeClickOverlay && this.hide();
    },
    handleCancel() {
      this.$emit('cancel');
      this.hide();
    },
    handleConfirm() {
      this.$emit('confirm');
      this.hide();
    }
  }
}
</script>

<style lang="stylus">
  .grimm-dialog-fade-enter-active {
    animation: dialogIn 0.2s;
  }

  .grimm-dialog-fade-leave-active {
    animation: dialogOut 0.2s;
  }

  @keyframes dialogIn {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  @keyframes dialogOut {
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }
</style>